<template>
  <div class="login">
    <!-- 头部标题 -->
    <Header/>
    <!-- 主要内容 -->
    <div class="login-banner">
      <div class="cover"> 
        <img src="./images/cover.png">
      </div>
      <form>
        <div class="input-row">
          <div class="input-label">手机号码</div>
          <div class="input" id="phoneInput">
            <input type="text" placeholder="请输入手机号" id="userPhone" v-model="userPhone">
          </div>
        </div>

        <div class="input-row">
          <div class="input-label">登录密码</div>
          <div class="input" id="pwdInput">
            <input type="password" placeholder="请输入密码" id="userPwd" v-model="userPassword">
          </div>
        </div>
      </form>
      <button class="btn" id="loginBtn" @click.prevent="userLogin">登录</button>
      <button class="btn" id="regBtn" @click="goRegister">注册</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Login',
    data() {
      return {
        userPhone:'',
        userPassword:'',
      }
    },
    methods: {
      getAllData() {
        //获取工作台数据
        this.$store.dispatch('getWorkInfo');
        //获取门店列表数据
        this.$store.dispatch('getStoreInfo');
        //获取订单列表数据
        this.$store.dispatch('getOrderInfo');
      },
      goRegister() {
        this.$router.push('/register');
      },
      //登录业务：派发active
      async userLogin(){
        try{
          let res = '';
          const {userPhone,userPassword} = this;
          sessionStorage.setItem("USERPHONE", JSON.stringify(this.userPhone));
          if(userPhone && userPassword) {
            res = await this.$store.dispatch('userLogin',{userPhone,userPassword});
          }
          if(res) {
            //登录成功：路由跳转
            this.$router.push('/home');  
            this.getAllData();
          }else {
            alert('请输入账号或密码！');
          }
        }catch(error){
          alert(error.message);
        }
      }
    }
  }
</script>

<style scoped>
  .login {
    width: 100vw;
    height: 100vh;
    text-align: center;
  }
  /* 顶部标题 */
  .login .login-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 6.6vh;
    background-color: #1B82D2;
  }
  .login .login-header-tt {
    font-size: 3vh;
    font-weight: 400;
    color: #fff;
  }

  /* 主要内容 */
  .login .cover>img {
    width: 100%;
    height: auto;
    margin-bottom: 2.4vh;
  }
  .login .input-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 96vw;
    height: 7vh;
    margin-left: 1.6vw;
    border: 0.4vw solid #ccc;
    text-align: left;
  }

  .login .input-label,
  .login .input {
    display: inline-block;
  }
  .login .input-label {
    font-size: 2.6vh;
    margin-left: 2vw;
  }
  .login .input>input {
    display:flex;
    align-items: center;
    width: 70vw;
    height: 2.6vh;
    margin-left: 2vw;
    padding-top: 1%;
    font-size: 2.6vh;
    border: 0;
  }
  .login .btn {
    display: block;
    width: 96.8vw;
    height: 7vh;
    margin-left: 1.6vw;
  }
  .login .btn#loginBtn{
    margin-top: 3vh;
    color: #fff;
    font-size: 3vh;
    background-color: #118EE9;
    border: 0.4vw solid #118EE9;
    border-radius: 0.8vh;
  }
  .login .btn#regBtn{
    margin-top: 2vh;
    color: #000;
    font-size: 3vh;
    background-color: #fff;
    border: 0.4vw solid #ccc;
    border-radius: 0.8vh;
  }
</style>